import React, { useContext } from 'react';
import cs from 'classnames';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import styles from './style/index.module.less';
import { Grid, Skeleton, Space } from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import { ViolationDetails } from '@/api/interface/violation';
const { Row, Col } = Grid;
function Volation({
  details,
  loading,
}: {
  details: ViolationDetails;
  loading: boolean;
}) {
  const { rtl, lang } = useContext(GlobalContext);
  const t = useLocale(locale);

  return (
    <div className={cs(styles['block'], rtl ? 'rtl' : '')}>
      <div className={styles['block-title']}>{t['volation.volation']}</div>
      <Skeleton loading={loading} text={{ width: '100%', rows: 7 }} animation>
        <Row gutter={24}>
          <Col span={8}>
            <Space className={cs(styles['block-col'])}>
              <span className={styles['name']}>{t['volation.emirate']}</span>
              <span className={styles['value']}>
                {details.emirate
                  ? details.emirate.value[lang === 'en-US' ? 'en' : 'ar']
                  : '--'}
              </span>
            </Space>
          </Col>
          <Col span={16}>
            <Space className={cs(styles['block-col'])}>
              <span className={styles['name']}>{t['volation.data']}</span>
              <span className={styles['value']}>{details.violationDate}</span>
            </Space>
          </Col>
          <Col span={8}>
            <Space className={cs(styles['block-col'])}>
              <span className={styles['name']}>{t['volation.entityName']}</span>
              <div>
                <span className={cs(styles['value'])}>
                  {details.emirateEntity
                    ? details.emirateEntity[
                        lang === 'en-US' ? 'name' : 'nameAr'
                      ]
                    : details.emirateEntityOther || '--'}
                </span>
                {details.emirateEntityOther && (
                  <span
                    className={styles['other']}
                    style={{ cursor: 'default' }}
                  >
                    (other)
                  </span>
                )}
              </div>
            </Space>
          </Col>
          <Col span={16}>
            <Space className={cs(styles['block-col'])}>
              <span className={styles['name']}>{t['volation.type']}</span>
              <span className={styles['value']}>
                {details.violationType
                  ? details.violationType.value[lang === 'en-US' ? 'en' : 'ar']
                  : '--'}
              </span>
            </Space>
          </Col>
          <Col span={24}>
            {details.violationTypeA && (
              <Space
                className={cs(
                  styles['block-col'],
                  styles['violation-additionalDetails']
                )}
              >
                <span className={styles['name']}>{t['volation.typeA']}</span>
                <span className={styles['value']}>
                  {details.violationTypeA
                    .map((a) => a?.value[lang === 'en-US' ? 'en' : 'ar'])
                    .join(', ')}
                </span>
              </Space>
            )}

            {details.violationTypeB && (
              <Space
                className={cs(
                  styles['block-col'],
                  styles['violation-additionalDetails']
                )}
              >
                <span className={styles['name']}>{t['volation.typeB']}</span>
                <span className={styles['value']}>
                  {details.violationTypeB
                    .map((a) => a?.value[lang === 'en-US' ? 'en' : 'ar'])
                    .join(', ')}
                </span>
              </Space>
            )}
          </Col>
          <Col span={24}>
            <Space className={cs(styles['block-col'])} direction="vertical">
              <div className={styles['name']}>{t['volation.desc']}</div>
              <div className={styles['value']}>{details.violationDesc}</div>
            </Space>
          </Col>
          {details.hasReported && (
            <div className={cs(styles['violation'])}>
              <Space className={cs(styles['question'])}>
                {t['volation.question']}
                <span className={styles['other']}>({t['YES']})</span>
              </Space>

              <Row gutter={24}>
                <Col span={8}>
                  <Space className={cs(styles['violation-col'])}>
                    <span className={styles['name']}>
                      {t['volation.entityName']}
                    </span>
                    <span className={styles['value']}>{details.refEntity}</span>
                  </Space>
                </Col>
                <Col span={10}>
                  <Space className={cs(styles['violation-col'])}>
                    <span className={styles['name']}>
                      {t['volation.reportedReference']}:
                    </span>
                    <span className={styles['value']}>
                      {details.refRefNumber}
                    </span>
                  </Space>
                </Col>
                <Col span={6}>
                  <Space className={cs(styles['violation-col'])}>
                    <span className={styles['name']}>
                      {t['volation.reportedDate']}
                    </span>
                    <span className={styles['value']}>{details.refYear}</span>
                  </Space>
                </Col>
              </Row>
            </div>
          )}
          {details?.violationAdditionalDetails && (
            <Col span={24}>
              <div
                className={cs(
                  styles['block-col'],
                  styles['violation-additionalDetails']
                )}
              >
                <span
                  className={cs(
                    lang === 'en-US' ? styles['name'] : styles['name-rtl']
                  )}
                >
                  {t['volation.additionalDetails']}
                </span>
                <span className={styles['value']}>
                  {details?.violationAdditionalDetails}
                </span>
              </div>
            </Col>
          )}
        </Row>
      </Skeleton>
    </div>
  );
}

export default Volation;
